<template>
  <el-dialog
    v-model="open"
    title="Clearance"
    width="78%"
    align="left"
    style="position: relative; background-color: #f1f1f1"
    draggable
  >
    <div class="w100p flex" style="margin-bottom: 10px">
      <p>
        Total Amount:{{ utils.currencType(sInfo.currencyType)
        }}{{ totalAmount }}
      </p>
      <span class="ml-20"
        >Declare Amount: {{ utils.currencType(sInfo.currencyType)
        }}{{ declareAmount }}</span
      >
    </div>
    <div class="w100p flex jc-sb aic mb-10">
      <el-input
        :value="sInfo.currencyType"
        disabled
        style="width: 10%"
      ></el-input>
      <div class="flex aic">
        <p>
          <el-input v-model="clearMoney" class="button_width font" />
        </p>
        <p>
          <el-button
            class="button_width font"
            @click="
              () => {
                getnumber('Value', clearMoney);
              }
            "
            >Value</el-button
          >
        </p>
        <p class="rel">
          <el-input
            v-model="percentage"
            @input="
              () => {
                getnumber(percentage);
              }
            "
            class="button_width font"
          ></el-input>
          <span class="abs" style="right: 6px; top: 20%">%</span>
        </p>
        <p>
          <el-button
            class="button_width font"
            @click="
              () => {
                getnumber('<500', 500);
              }
            "
            >{{ "<500" }}
          </el-button>
        </p>
        <p>
          <el-button
            class="button_width font"
            @click="
              () => {
                getnumber('<700', 700);
              }
            "
            >{{ "<700" }}
          </el-button>
        </p>
        <p>
          <el-button
            class="button_width font"
            @click="
              () => {
                getnumber('<800', 800);
              }
            "
            >{{ "<800" }}
          </el-button>
        </p>
      </div>
    </div>
    <div class="w100p flex">
      <el-table :data="clearList" height="340" class="clearanceTable bs">
        <el-table-column
          fixed
          prop="product_name_pi"
          label="MODEL"
          width="200"
        />
        <el-table-column
          align="center"
          prop="product_name_pi"
          label="DESCRIPTION"
          width="200"
        />
        <el-table-column
          align="center"
          prop="price"
          label="True Price"
          width="200"
        />
        <el-table-column
          align="center"
          prop="quantity"
          label="QTY"
          width="200"
        />
        <el-table-column align="center" label="Declare Name" width="200">
          <template v-slot="product_name_invoice">
            <el-input v-model="product_name_invoice.row.product_name_pi" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="Declare Info" width="200">
          <template v-slot="product_description_invoice">
            <el-input
              v-model="product_description_invoice.row.product_name_pi"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="Declare Price" width="200">
          <template v-slot="price">
            <el-input
              :value="
                isrelease === 0
                  ? price.row.price_declare_invoice
                  : calculatePrice(totalAmount, price.row.price)
              "
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          style="border: 1px solid #6193d2; color: #ffffff"
          @click="save"
          >Save</el-button
        >
        <el-button
          style="
            border: 1px solid #6193d2;
            background-color: #ffffff;
            color: #6193d2;
          "
          @click="closeWindow"
          >Cancel</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import * as utils from "../../utils";
const open = ref(false);
const clearMoney = ref("");
const percentage = ref("");
const props = defineProps({
  isrelease: Number,
  declareAmount: Number,
  totalAmount: String,
  clearList: Object,
  sInfo: Object,
});
const emits = defineEmits(["getnumber", "ClearanceSave"]);
// 计算价格
const calculatePrice = (totalAmount, price) => {
  let priced = (props.declareAmount * price) / totalAmount.replace(/,/g, "");
  return priced.toFixed(2);
};
const getnumber = (x, Number) => {
  emits("getnumber", x, Number);
};
const closeWindow = () => {
  open.value = false;
};
const save = () => {
  emits("ClearanceSave");
};
const dialogopen = () => {
  open.value = true;
};

defineExpose({
  open,
  clearMoney,
  percentage,
  dialogopen,
  calculatePrice,
});
</script>
<style lang="less" scoped>
.clearanceTable {
  border-radius: 20px;
  border: 1px solid #e7e9ea;
}

// .el-input__inner {
//     font-family: 'swis';
// }

.button_width {
  width: 80px;
}

.el-dialog__title {
  font-weight: bold;
}

.el-dialog__footer {
  margin-top: 10px;
}

.el-dialog__body {
  padding-top: 5px;
}
</style>
